<template>
	<div id="ZhuZhuangTu02"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import { Column } from '@antv/g2plot'

	const data = [
		{ year: '产废口1', value: 40,type:'已转运' },
		{ year: '产废口1', value: 25,type:'存量' },
		{ year: '产废口2', value: 30,type:'已转运' },
		{ year: '产废口2', value: 25,type:'存量' },
		{ year: '产废口3', value: 30 ,type:'已转运'},
		{ year: '产废口3', value: 20 ,type:'存量'},
		{ year: '产废口4', value: 60 ,type:'已转运'},
		{ year: '产废口4', value: 10 ,type:'存量'},
		{ year: '产废口5', value: 50 ,type:'已转运'},
		{ year: '产废口5', value: 40 ,type:'存量'},
	]

	onMounted(() => {
		const stackedColumnPlot = new Column('ZhuZhuangTu02', {
			data,
			isStack: true,
			xField: 'year',
			yField: 'value',
			seriesField: 'type',
			label: {
				// 可手动配置 label 数据标签位置
				position: 'middle', // 'top', 'bottom', 'middle'
				// 可配置附加的布局方法
				layout: [
					// 柱形图数据标签位置自动调整
					{type: 'interval-adjust-position'},
					// 数据标签防遮挡
					{type: 'interval-hide-overlap'},
					// 数据标签文颜色自动调整
					{type: 'adjust-color'}
				]
			},
			minColumnWidth: 20,
			maxColumnWidth: 30,

		})
		stackedColumnPlot.render()
	})
</script>

<style scoped></style>
